<template>
  <div class="list">
    <div class="listBox" v-for="(v,index) in listimgs" :key="index">
        <div class="smillbox" v-for="(v, index) in listimgs[index]" :key="index" @click="goClassify(v.path)">
            <img :src="v.img" alt="">
            <span>{{ v.msg }}</span>
        </div>
    </div>
  </div>
</template>

<script>

export default {
    data() {
        return {
            listimgs: [
                [
                    { img: "https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png_q90.jpg_.webp", msg: "天猫新品", path: '/TmallPage' },
                    { img: "https://gw.alicdn.com/imgextra/i1/O1CN018Ilnep1Qt9ryh1Vue_!!6000000002033-2-tps-183-144.png_q90.jpg_.webp", msg: "淘宝吃货", path: '/' },
                ],
                [
                    { img: "https://gw.alicdn.com/imgextra/i3/O1CN01FgQFp81spmBXqQMtA_!!6000000005816-2-tps-183-144.png_q90.jpg_.webp", msg: "今日爆款", path: '/' },
                    { img: "https://gw.alicdn.com/imgextra/i2/O1CN01gUIFrA1OuPj70aTIW_!!6000000001765-2-tps-183-144.png_q90.jpg_.webp", msg: "省钱卡", path: '/msCard' },
                ],
                [
                    { img: "https://gw.alicdn.com/imgextra/i1/O1CN01tsk5OY1q0MUo5PJga_!!6000000005433-2-tps-183-144.png_q90.jpg_.webp", msg: "天猫国际", path: '/InterPage' },
                    { img: "https://gw.alicdn.com/imgextra/i3/O1CN013WcsZW1jfr4AXnmVl_!!6000000004576-2-tps-183-144.png_q90.jpg_.webp", msg: "淘领金币", path: '/getCoin' },
                ],
                [
                    { img: "https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png_q90.jpg_.webp", msg: "飞猪旅行", path: '/zhu' },
                    { img: "https://gw.alicdn.com/imgextra/i2/O1CN01ZOR1cv1yjGFORGh1V_!!6000000006614-2-tps-183-144.png_q90.jpg_.webp", msg: "阿里拍卖", path: '/AuctionPage' }
                ],

                [
                    { img: "https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg_.webp", msg: "天猫超市", path: '/' },
                    { img: "https://gw.alicdn.com/tfs/TB1WgOmesieb18jSZFvXXaI3FXa-183-144.png_q90.jpg_.webp?getAvatar=1", msg: "分类", path: '/classify' },
                ],
                [
                    { img: "https://gw.alicdn.com/imgextra/i4/O1CN01VuRfwH1muSbsJFxoM_!!6000000005014-2-tps-183-144.png_q90.jpg_.webp", msg: "东奥公益", path: '/' },
                    { img: "https://gw.alicdn.com/imgextra/i1/O1CN01rIm4u11F81KogrKz4_!!6000000000441-2-tps-183-144.png_q90.jpg_.webp", msg: "闲鱼", path: '/' },
                ],
                [
                    { img: "https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp", msg: "淘票票", path: '/' },
                    { img: "https://gw.alicdn.com/imgextra/i1/O1CN019LbO921EcsOuQqWTM_!!6000000000373-2-tps-183-144.png_q90.jpg_.webp", msg: "土货鲜食", path: '/' },
                ],
                [
                    { img: "https://gw.alicdn.com/imgextra/i3/O1CN01MiunNU1oU0uEKRvja_!!6000000005227-2-tps-183-144.png_q90.jpg_.webp", msg: "天猫好房", path: '/' },
                    { img: "https://gw.alicdn.com/imgextra/i4/O1CN01cxU47W1RnUaWavX3f_!!6000000002156-2-tps-183-144.png_q90.jpg_.webp", msg: "天猫汽车", path: '/tmcarPage' },
                ],
            ]
        }
    },
    methods: {
        goClassify(path) {
            this.$router.push(`${path}`).catch(err=>{})
        }
    }

}
</script>

<style scoped>
.list{
    width: 96%;
    height: 2.92rem;
    margin: auto;
    margin-bottom:.2rem !important;
    background: #fff;
    border-radius: 0.24rem;
    display: flex; 
    overflow: auto;
    }
 .list .listBox{
    width: 19%;
    height: 2.92rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
 }
 .list .listBox .smillbox{
    width: 100%;
    height: 1.46rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
 }

 .list .listBox .smillbox img{
    width: 1.22rem;
    height: .96rem;
 }
  .list .listBox .smillbox span{
    text-align: center;
    width: 100%;
  }
</style>